<script lang="ts" setup>
import {onMounted, ref} from 'vue'

import {useUserStore} from '@/stores/user'
import router from '@/router/index.js'
import {RegionFullSelects, RegionFullText} from "v-region";
import { ElMessage } from 'element-plus'
import {getUserInfoAPI} from '@/apis/user'
import {applyExpertAPI,getExpertInfoAPI} from '@/apis/expert'


const step = ref(0)
const expertForm=ref()

onMounted(()=>{
  getExpertInfo()

})

const status=ref(0)
//0未申请 1审核中 2审核通过

function getExpertInfo() {
  getExpertInfoAPI(useUserStore().userInfo.uid).then((res)=>{
    if(res.data!==null&&res.data.status==='1'){
      status.value=2
      step.value=4
    }else if(res.data!==null&&res.data.status==='0'){
      status.value=1
      step.value=3
    }
  })
}

const expertData=ref({
  major:'',
  desc:'',
  edu:'',
  belong:'',
  position:'',
  realName:useUserStore().userInfo.realname||'',
  identityNum:useUserStore().userInfo.identityNum||'',
  region:{
    province:'',
    city:'',
    area:'',
    town:'',
  },
  address:''
})

const rules={
  major:[
    { type: 'string',required: true,message: "请选择专业", trigger: 'blur'},
  ],
  edu:[
    { type: 'string',required: true,message: "请选择", trigger: 'blur'},
  ],
  position:[
    { type: 'string',required: true,message: "必填", trigger: 'blur'},
  ],
  belong:[
    { type: 'string',required: true,message: "必填", trigger: 'blur'},
  ],
  realName:[
    { type: 'string',required: true,message: "必填", trigger: 'blur'},
  ],
  identityNum:[
    { type: 'string',required: true,message: "必填", trigger: 'blur'},
  ],
  town:[
    { type: 'string',required: true,message: "请选择区域", trigger: 'blur'},
  ],
  address:[
    { type: 'string',required: true,message: "必填", trigger: 'blur'},
    {max: 20,message: "长度不能超过20位" }
  ],
}

const next = (form) => {
  form.validate(valid=>{
    if(valid){
      if(step.value==1&&!expertData.value.region.town){
        ElMessage({
          message: '请选择区域',
          type: 'warning',
        })
        return
      }
      step.value++
      if (step.value===3){
        //TODO register
        registerExpert()
      }
    }else{
      console.log("error submit")
    }
  })
}

const registerExpert=async ()=>{
  const expert={
    uid:useUserStore().userInfo.uid,
    expert_avatar:useUserStore().getAvatar,
    name:useUserStore().userInfo.username,
    position:expertData.value.position,
    belong:expertData.value.belong,
    descri:expertData.value.desc,
    province: expertData.value.region.province,
    city: expertData.value.region.city,
    address: expertData.value.address,
    guidances:0,
    replies:0,
    status:0,//专家审核状态:  1通过  0未通过
  }
  const res=await applyExpertAPI(expert)
  if(res.code===200){
    step.value=3
  }
}

</script>

<template>
  <div class="expert-container">
    <h3>专家认证</h3>
    
    <div class="stepBar">
      <el-steps style="width: 600px" :active="step" finish-status="success">
        <el-step title="填写专业" />
        <el-step title="填写个人资料" />
        <el-step title="申请认证" />
        <el-step title="等待审核" v-if="status!==2"/>
        <el-step title="审核通过" v-if="status===2"/>
      </el-steps>
    </div>

    <div v-show="!useUserStore().isAuth" style="margin-top: 60px; text-align: center;">
      <h2>当前未实名，请先完成实名认证</h2>
      <el-button class="nextBtn" @click="router.replace('/userCenter/home')">
        去实名
      </el-button>
    </div>

      <div class="formBox" v-show="useUserStore().isAuth">
        <el-form :model="expertData" ref="expertForm" style="margin-top: 20px" :rules="rules">
          <template v-if="step===0">

            <el-form-item label="学历" prop="edu">
              <el-select v-model="expertData.edu" placeholder="请选择" style="width: 300px">
                <el-option label="博士及以上" value="博士及以上"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="大专" value="大专"></el-option>
                <el-option label="高中" value="高中"></el-option>
                <el-option label="初中" value="初中"></el-option>
                <el-option label="小学及以下" value="小学及以下"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业" prop="major">
              <el-select v-model="expertData.major"  placeholder="请选择" style="width: 300px">
                <el-option label="禽畜养殖" value="禽畜养殖"></el-option>
                <el-option label="水果种植" value="水果种植"></el-option>
                <el-option label="粮油作物种植" value="粮油作物种植"></el-option>
                <el-option label="蔬菜种植" value="蔬菜种植"></el-option>
                <el-option label="经济作物种植" value="经济作物种植"></el-option>
                <el-option label="农机技术" value="农机技术"></el-option>
                <el-option label="其他养殖" value="其他养殖"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职称" prop="position">
              <el-input v-model="expertData.position" placeholder="例：高级畜牧师"></el-input>
            </el-form-item>



          </template>
          <template v-else-if="step===1">
            <el-form-item label="所在区域" prop="major">
              <RegionFullSelects  v-model="expertData.region"/>
            </el-form-item>
            <el-form-item label="工作单位" prop="belong">
              <el-input v-model="expertData.belong"></el-input>
              </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="expertData.address" placeholder="街道地址门牌号"></el-input>
            </el-form-item>
            <el-form-item label="个人简介" prop="address">
              <el-input type="textarea" rows="3" v-model="expertData.desc" placeholder="个人简介"></el-input>
            </el-form-item>
          </template>
          <template v-else-if="step===2">
            <el-descriptions title="身份信息" column="2">
              <el-descriptions-item label="真实姓名：">{{expertData.realName}}</el-descriptions-item>
              <el-descriptions-item label="身份证号：">{{expertData.identityNum}}</el-descriptions-item>
              <el-descriptions-item label="所在区域：">
                <RegionFullText  separator="" v-model="expertData.region" />
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="专家信息" column="2">
              <el-descriptions-item label="职称：">{{expertData.position}}</el-descriptions-item>
              <el-descriptions-item label="学历：">{{expertData.edu}}</el-descriptions-item>
              <el-descriptions-item label="专业：">{{expertData.major}}</el-descriptions-item>


            </el-descriptions>
          </template>
          <template v-else-if="step===3">
            <el-result
                icon="success"
                title="已递交申请"
                sub-title="等待审核通过"
            >
            </el-result>
          </template>
          <template v-else-if="step===4">
            <el-result
                icon="success"
                title="恭喜"
                sub-title="您的专家申请已通过"
            >
            </el-result>
          </template>
        </el-form>
        <div style="text-align: center; margin-top: 30px;">
          <el-button class="nextBtn" @click="next(expertForm)" v-show="step<3">{{step===2?'申请专家认证':'下一步'}}</el-button>
          <br>
          <el-button class="preBtn" @click="step--" v-show="step>0&&step<3">上一步</el-button>
        </div>
      </div>

  </div>
</template>

<style scoped lang="less">
.expert-container {
  width: 100%;
  max-width: 990px;
  min-height: 600px;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);

  h3 {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }
}

.stepBar {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}

.formBox {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  background-color: #fafafa;
  
  .el-form {
    .el-form-item {
      margin-bottom: 24px;
      
      .el-input, .el-select, .el-textarea {
        width: 100%;
        max-width: 400px;
      }
      
      .el-textarea {
        .el-textarea__inner {
          min-height: 100px;
        }
      }
    }
  }
}

.nextBtn {
  margin-top: 30px;
  height: 40px;
  width: 300px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  
  &:hover {
    background-color: #0056b3;
  }
}

.preBtn {
  margin-top: 10px;
  height: 40px;
  width: 300px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  
  &:hover {
    background-color: #545b62;
  }
}

.el-descriptions {
  margin-bottom: 20px;
  
  .el-descriptions__title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
  }
}

.el-result {
  padding: 40px 0;
}
</style>